<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>九宫格抽奖系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2980, #26d0ce);
      color: #fff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      overflow-x: hidden;
    }

    .container {
      max-width: 900px;
      width: 100%;
      text-align: center;
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    header {
      margin: 20px 0 30px;
      text-align: center;
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 15px;
      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      background: linear-gradient(to right, #ff9966, #ff5e62);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 1px;
    }

    .subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
      margin-bottom: 25px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }

    .control-panel {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      margin-bottom: 25px;
    }

    .panel-section {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 20px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      flex: 1;
      min-width: 250px;
    }

    .panel-section h3 {
      margin-bottom: 15px;
      color: #FFD700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .slider-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .slider-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .slider-container input {
      width: 100%;
      height: 10px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      outline: none;
    }

    .slider-container input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff5252;
      cursor: pointer;
    }

    .checkbox-container {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .checkbox-container input {
      width: 18px;
      height: 18px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 15px;
      max-width: 500px;
      margin: 0 auto 30px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
    }

    .grid-item {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 15px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .grid-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
      z-index: 1;
    }

    .grid-item.active {
      background: rgba(255, 215, 0, 0.3);
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
      z-index: 2;
    }

    .grid-item.win {
      animation: winPulse 1s infinite;
    }

    @keyframes winPulse {
      0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
      50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9); }
      100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    }

    .prize-icon {
      font-size: 3rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .prize-name {
      font-size: 1.1rem;
      font-weight: bold;
      z-index: 2;
    }

    .prize-value {
      font-size: 0.9rem;
      opacity: 0.8;
      z-index: 2;
    }

    .probability-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(255, 0, 0, 0.7);
      color: white;
      font-size: 0.7rem;
      padding: 2px 6px;
      border-radius: 10px;
      z-index: 3;
    }

    .button-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 20px 0 30px;
      flex-wrap: wrap;
    }

    .btn {
      padding: 15px 35px;
      font-size: 1.2rem;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-start {
      background: linear-gradient(45deg, #00c853, #64dd17);
      color: white;
    }

    .btn-start:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 200, 83, 0.4);
    }

    .btn-start:disabled {
      background: linear-gradient(45deg, #888, #aaa);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-stop {
      background: linear-gradient(45deg, #ff5252, #ff4081);
      color: white;
    }

    .btn-stop:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(255, 82, 82, 0.4);
    }

    .btn-stop:disabled {
      background: linear-gradient(45deg, #888, #aaa);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-reset {
      background: linear-gradient(45deg, #2196F3, #21CBF3);
      color: white;
    }

    .btn-reset:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(33, 150, 243, 0.4);
    }

    .result-container {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 25px;
      margin: 20px auto;
      max-width: 500px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .result-title {
      font-size: 1.8rem;
      margin-bottom: 20px;
      color: #FFD700;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .result-content {
      font-size: 1.8rem;
      font-weight: bold;
      margin: 20px 0;
      min-height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .result-icon {
      font-size: 4rem;
      margin-bottom: 15px;
      animation: bounce 1s infinite alternate;
    }

    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-15px); }
    }

    .result-text {
      text-align: center;
    }

    .result-name {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    .result-value {
      font-size: 1.3rem;
      opacity: 0.9;
    }

    .history {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 25px;
      margin-top: 30px;
      max-width: 500px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      animation: slideUp 0.5s ease-out;
    }

    .history h2 {
      margin-bottom: 20px;
      color: #FFD700;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      font-size: 1.8rem;
    }

    .history-list {
      max-height: 200px;
      overflow-y: auto;
      text-align: left;
    }

    .history-item {
      padding: 12px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
    }

    .history-item:hover {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
    }

    .history-item:last-child {
      border-bottom: none;
    }

    .history-icon {
      font-size: 1.5rem;
      margin-right: 15px;
    }

    .history-details {
      flex: 1;
    }

    .history-name {
      font-size: 1.2rem;
      font-weight: bold;
    }

    .history-value {
      font-size: 1rem;
      opacity: 0.8;
    }

    .history-time {
      font-size: 0.9rem;
      opacity: 0.7;
    }

    .footer {
      margin-top: 40px;
      font-size: 1rem;
      opacity: 0.8;
      text-align: center;
      padding: 15px;
      width: 100%;
    }

    @media (max-width: 600px) {
      .grid-item {
        height: 100px;
      }

      .prize-icon {
        font-size: 2rem;
      }

      .prize-name {
        font-size: 0.9rem;
      }

      .result-name {
        font-size: 1.5rem;
      }

      .btn {
        padding: 12px 25px;
        font-size: 1.1rem;
      }
      
      .control-panel {
        flex-direction: column;
      }
    }

    .confetti {
      position: fixed;
      width: 10px;
      height: 10px;
      background-color: #f00;
      top: -10px;
      animation: fall linear forwards;
    }

    @keyframes fall {
      to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }

    .stats-bar {
      display: flex;
      justify-content: space-around;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 10px;
      margin: 15px 0;
      font-size: 0.9rem;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-value {
      font-weight: bold;
      font-size: 1.1rem;
      color: #FFD700;
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>🎯 增强版九宫格抽奖 🎯</h1>
    <p class="subtitle">新增音效反馈、概率控制与奖品自定义功能</p>
  </header>

  <div class="control-panel">
    <div class="panel-section">
      <h3>⚙️ 抽奖设置</h3>
      <div class="slider-container">
        <div class="slider-label">
          <span>抽奖速度</span>
          <span id="speedValue">5</span>
        </div>
        <input type="range" id="speedSlider" min="1" max="10" value="5">
      </div>
      <div class="slider-container">
        <div class="slider-label">
          <span>中奖概率</span>
          <span id="probabilityValue">30%</span>
        </div>
        <input type="range" id="probabilitySlider" min="5" max="80" value="30">
      </div>
    </div>

    <div class="panel-section">
      <h3>🔊 音效设置</h3>
      <div class="checkbox-container">
        <input type="checkbox" id="soundEnabled" checked>
        <label for="soundEnabled">启用音效反馈</label>
      </div>
      <div class="slider-container">
        <div class="slider-label">
          <span>音量控制</span>
          <span id="volumeValue">70%</span>
        </div>
        <input type="range" id="volumeSlider" min="0" max="100" value="70">
      </div>
    </div>
  </div>

  <div class="stats-bar">
    <div class="stat-item">
      <div>今日抽奖次数</div>
      <div class="stat-value" id="dailyCount">0</div>
    </div>
    <div class="stat-item">
      <div>中奖次数</div>
      <div class="stat-value" id="winCount">0</div>
    </div>
    <div class="stat-item">
      <div>中奖率</div>
      <div class="stat-value" id="winRate">0%</div>
    </div>
  </div>

  <div class="grid-container">
    <!-- 奖品格子将由JavaScript动态生成 -->
  </div>

  <div class="button-container">
    <button class="btn btn-start" id="startButton">
      🎮 开始抽奖
    </button>
    <button class="btn btn-stop" id="stopButton" disabled>
      ⏹️ 停止抽奖
    </button>
    <button class="btn btn-reset" id="resetButton">
      🔄 重新开始
    </button>
  </div>

  <div class="result-container">
    <div class="result-title">🎉 抽奖结果 🎉</div>
    <div class="result-content" id="resultContent">
      <div class="result-icon">🎰</div>
      <div class="result-text">等待抽奖开始...</div>
    </div>
  </div>

  <div class="history">
    <h2>📜 抽奖记录 📜</h2>
    <div class="history-list" id="historyList">
      <div class="history-item">
        <div class="history-icon">📝</div>
        <div class="history-details">
          <div class="history-name">暂无抽奖记录</div>
        </div>
        <div class="history-time">--</div>
      </div>
    </div>
  </div>

  <div class="footer">
    <p>增强版九宫格抽奖系统 © 2023 | 新增音效与概率控制功能</p>
  </div>
</div>

<script>
  // 获取DOM元素
  const startButton = document.getElementById('startButton');
  const stopButton = document.getElementById('stopButton');
  const resetButton = document.getElementById('resetButton');
  const resultContent = document.getElementById('resultContent');
  const historyList = document.getElementById('historyList');
  const speedSlider = document.getElementById('speedSlider');
  const speedValue = document.getElementById('speedValue');
  const probabilitySlider = document.getElementById('probabilitySlider');
  const probabilityValue = document.getElementById('probabilityValue');
  const volumeSlider = document.getElementById('volumeSlider');
  const volumeValue = document.getElementById('volumeValue');
  const soundEnabled = document.getElementById('soundEnabled');
  const dailyCount = document.getElementById('dailyCount');
  const winCount = document.getElementById('winCount');
  const winRate = document.getElementById('winRate');
  const gridContainer = document.querySelector('.grid-container');

  // 奖品数据
  const prizes = [
    { name: "游戏主机", value: "价值 ¥2999", icon: "🎮", probability: 5 },
    { name: "智能手机", value: "价值 ¥3999", icon: "📱", probability: 10 },
    { name: "笔记本电脑", value: "价值 ¥5999", icon: "💻", probability: 3 },
    { name: "无线耳机", value: "价值 ¥899", icon: "🎧", probability: 15 },
    { name: "智能手表", value: "价值 ¥1299", icon: "⌚", probability: 12 },
    { name: "神秘礼盒", value: "价值 ¥1999", icon: "🎁", probability: 8 },
    { name: "优惠券", value: "满 ¥1000 减 ¥200", icon: "🎫", probability: 25 },
    { name: "现金红包", value: "¥888", icon: "🧧", probability: 15 },
    { name: "画板套装", value: "价值 ¥599", icon: "🎨", probability: 7 }
  ];

  // 音效对象
  const sounds = {
    start: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3'),
    spin: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-slot-machine-spin-1075.mp3'),
    win: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3'),
    lose: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-explosion-2759.mp3')
  };

  // 设置音效音量
  Object.values(sounds).forEach(sound => {
    sound.volume = 0.7;
  });

  // 抽奖状态变量
  let isSpinning = false;
  let currentIndex = 0;
  let baseSpeed = 50;
  let speedFactor = 5;
  let winProbability = 30;
  let timer = null;
  let winIndex = -1;
  let history = [];
  let stats = {
    daily: 0,
    wins: 0
  };

  // 初始化奖品格子
  function initGridItems() {
    gridContainer.innerHTML = '';
    prizes.forEach((prize, index) => {
      const gridItem = document.createElement('div');
      gridItem.className = 'grid-item';
      gridItem.innerHTML = `
        <div class="prize-icon">${prize.icon}</div>
        <div class="prize-name">${prize.name}</div>
        <div class="prize-value">${prize.value}</div>
        <div class="probability-badge">${prize.probability}%</div>
      `;
      gridContainer.appendChild(gridItem);
    });
  }

  // 获取所有格子元素
  function getGridItems() {
    return document.querySelectorAll('.grid-item');
  }

  // 设置速度滑块
  speedSlider.addEventListener('input', function() {
    speedFactor = parseInt(this.value);
    speedValue.textContent = speedFactor;
  });

  // 设置概率滑块
  probabilitySlider.addEventListener('input', function() {
    winProbability = parseInt(this.value);
    probabilityValue.textContent = winProbability + '%';
  });

  // 设置音量滑块
  volumeSlider.addEventListener('input', function() {
    const volume = parseInt(this.value) / 100;
    volumeValue.textContent = parseInt(this.value) + '%';
    Object.values(sounds).forEach(sound => {
      sound.volume = volume;
    });
  });

  // 播放音效
  function playSound(soundName) {
    if (soundEnabled.checked && sounds[soundName]) {
      const sound = sounds[soundName].cloneNode();
      sound.play();
    }
  }

  // 计算实际速度
  function getActualSpeed() {
    return Math.max(10, baseSpeed / speedFactor);
  }

  // 更新统计信息
  function updateStats() {
    dailyCount.textContent = stats.daily;
    winCount.textContent = stats.wins;
    winRate.textContent = stats.daily > 0 ? Math.round((stats.wins / stats.daily) * 100) + '%' : '0%';
    
    // 保存到本地存储
    localStorage.setItem('lotteryStats', JSON.stringify(stats));
  }

  // 开始抽奖
  function startLottery() {
    if (isSpinning) return;

    playSound('start');
    resetLottery();
    isSpinning = true;
    startButton.disabled = true;
    stopButton.disabled = false;

    resultContent.innerHTML = `
      <div class="result-icon">🎡</div>
      <div class="result-text">抽奖进行中...</div>
    `;

    // 根据概率决定是否中奖
    const willWin = Math.random() * 100 < winProbability;
    
    if (willWin) {
      // 根据奖品概率分布选择中奖项
      const totalProbability = prizes.reduce((sum, prize) => sum + prize.probability, 0);
      let randomValue = Math.random() * totalProbability;
      let accumulated = 0;
      
      for (let i = 0; i < prizes.length; i++) {
        accumulated += prizes[i].probability;
        if (randomValue <= accumulated) {
          winIndex = i;
          break;
        }
      }
    } else {
      // 未中奖，随机选择一个非中奖项（这里简化处理）
      winIndex = -1;
    }

    animateLottery();
  }

  // 抽奖动画
  function animateLottery() {
    const gridItems = getGridItems();
    gridItems.forEach(item => item.classList.remove('active'));

    gridItems[currentIndex].classList.add('active');
    playSound('spin');

    currentIndex = (currentIndex + 1) % gridItems.length;

    // 检查是否到达中奖位置
    if (winIndex !== -1 && currentIndex === winIndex && Math.random() > 0.7) {
      setTimeout(endLottery, 100);
      return;
    }

    timer = setTimeout(animateLottery, getActualSpeed());
  }

  // 停止抽奖
  function stopLottery() {
    if (!isSpinning) return;

    clearTimeout(timer);
    isSpinning = false;

    if (winIndex === -1) {
      // 随机选择一个未中奖项
      const nonPrizeIndexes = prizes.map((_, i) => i).filter(i => prizes[i].probability < 50);
      winIndex = nonPrizeIndexes[Math.floor(Math.random() * nonPrizeIndexes.length)];
    }

    const gridItems = getGridItems();
    gridItems.forEach(item => item.classList.remove('active'));
    gridItems[winIndex].classList.add('active', 'win');

    showResult();
    startButton.disabled = false;
    stopButton.disabled = true;
  }

  // 结束抽奖
  function endLottery() {
    stopLottery();
  }

  // 显示结果
  function showResult() {
    const prize = prizes[winIndex];
    const isWin = prize.probability < 50; // 假设概率小于50%的是奖品

    if (isWin) {
      playSound('win');
      resultContent.innerHTML = `
        <div class="result-icon">${prize.icon}</div>
        <div class="result-text">
          <div class="result-name">${prize.name}</div>
          <div class="result-value">${prize.value}</div>
        </div>
      `;
      stats.wins++;
      createConfetti();
    } else {
      playSound('lose');
      resultContent.innerHTML = `
        <div class="result-icon">😢</div>
        <div class="result-text">
          <div class="result-name">很遗憾，未中奖</div>
          <div class="result-value">下次好运！</div>
        </div>
      `;
    }

    stats.daily++;
    updateStats();
    addToHistory(prize, isWin);
  }

  // 创建彩色纸屑效果
  function createConfetti() {
    const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
    const container = document.body;

    for (let i = 0; i < 150; i++) {
      const confetti = document.createElement('div');
      confetti.className = 'confetti';
      confetti.style.left = Math.random() * 100 + 'vw';
      confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
      confetti.style.width = Math.random() * 10 + 5 + 'px';
      confetti.style.height = Math.random() * 10 + 5 + 'px';
      confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
      container.appendChild(confetti);

      setTimeout(() => {
        confetti.remove();
      }, 5000);
    }
  }

  // 添加到历史记录
  function addToHistory(prize, isWin) {
    const now = new Date();
    const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;

    history.unshift({
      name: prize.name,
      value: prize.value,
      icon: isWin ? prize.icon : '😢',
      time: timeString,
      isWin: isWin
    });

    if (history.length > 5) {
      history.pop();
    }

    updateHistoryList();
    
    // 保存到本地存储
    localStorage.setItem('lotteryHistory', JSON.stringify(history));
  }

  // 更新历史记录列表
  function updateHistoryList() {
    if (history.length === 0) {
      historyList.innerHTML = `
        <div class="history-item">
          <div class="history-icon">📝</div>
          <div class="history-details">
            <div class="history-name">暂无抽奖记录</div>
          </div>
          <div class="history-time">--</div>
        </div>
      `;
      return;
    }

    historyList.innerHTML = '';
    history.forEach(item => {
      const historyItem = document.createElement('div');
      historyItem.className = 'history-item';
      historyItem.innerHTML = `
        <div class="history-icon">${item.icon}</div>
        <div class="history-details">
          <div class="history-name">${item.name}</div>
          <div class="history-value">${item.value}</div>
        </div>
        <div class="history-time">${item.time}</div>
      `;
      historyList.appendChild(historyItem);
    });
  }

  // 重置抽奖
  function resetLottery() {
    clearTimeout(timer);
    isSpinning = false;
    currentIndex = 0;
    winIndex = -1;

    const gridItems = getGridItems();
    gridItems.forEach(item => {
      item.classList.remove('active', 'win');
    });

    resultContent.innerHTML = `
      <div class="result-icon">🎰</div>
      <div class="result-text">等待抽奖开始...</div>
    `;

    startButton.disabled = false;
    stopButton.disabled = true;
  }

  // 加载保存的数据
  function loadSavedData() {
    const savedStats = localStorage.getItem('lotteryStats');
    if (savedStats) {
      stats = JSON.parse(savedStats);
      updateStats();
    }

    const savedHistory = localStorage.getItem('lotteryHistory');
    if (savedHistory) {
      history = JSON.parse(savedHistory);
      updateHistoryList();
    }
  }

  // 事件监听
  startButton.addEventListener('click', startLottery);
  stopButton.addEventListener('click', stopLottery);
  resetButton.addEventListener('click', resetLottery);

  // 初始化
  initGridItems();
  loadSavedData();
</script>
</body>
</html>